<template>
  <div class="price-detail-container">
    <!-- 状态栏 -->
    <div class="status-bar">
      <span class="time">12:30</span>
      <div class="status-icons">
        <span class="signal">📶</span>
        <span class="wifi">📶</span>
        <span class="battery">🔋</span>
      </div>
    </div>

    <!-- 头部 -->
    <div class="header">
      <div class="header-left">
        <div class="back-button" @click="goBack">←</div>
        <h1 class="page-title">价目查询</h1>
      </div>
      <div class="header-right">
        <div class="menu-icon">⋯</div>
        <div class="target-icon">🎯</div>
      </div>
    </div>

    <!-- 搜索栏 -->
    <div class="search-section">
      <div class="search-input-container">
        <input 
          v-model="searchKeyword" 
          type="text" 
          placeholder="可输入药品、项目内容"
          class="search-input"
          @input="handleSearch"
        />
      </div>
      <div class="filter-dropdown">
        <select v-model="selectedCategory" @change="handleCategoryChange" class="category-select">
          <option value="">全部类</option>
          <option value="药品">药品</option>
          <option value="诊疗">诊疗</option>
          <option value="检查">检查</option>
          <option value="检验">检验</option>
          <option value="手术">手术</option>
        </select>
        <div class="dropdown-arrow">▼</div>
      </div>
    </div>

    <!-- 价格列表 -->
    <div class="price-list">
      <!-- 加载状态 -->
      <div v-if="loading" class="loading-state">
        <div class="loading-content">
          <div class="loading-icon">⏳</div>
          <div class="loading-text">正在加载价目数据...</div>
        </div>
      </div>
      
      <!-- 有数据时显示列表 -->
      <div 
        v-else-if="filteredPriceItems.length > 0"
        v-for="item in filteredPriceItems" 
        :key="item.PriceId"
        class="price-item"
        @click="showItemDetail(item)"
      >
        <div class="item-info">
          <div class="item-name">{{ item.Title || item.ServiceName }}</div>
          <div class="item-details">
            <div class="detail-row">
              <span class="detail-label">价格:</span>
              <span class="detail-value price">¥{{ item.Price }}(元)</span>
            </div>
            <div v-if="item.Sample" class="detail-row">
              <span class="detail-label">样本类型:</span>
              <span class="detail-value">{{ item.Sample }}</span>
            </div>
            <div v-if="item.ServiceType" class="detail-row">
              <span class="detail-label">服务类型:</span>
              <span class="detail-value">{{ item.ServiceType }}</span>
            </div>
            <div v-if="item.DepartmentName" class="detail-row">
              <span class="detail-label">科室:</span>
              <span class="detail-value">{{ item.DepartmentName }}</span>
            </div>
            <div v-if="item.DoctorLevel" class="detail-row">
              <span class="detail-label">医生级别:</span>
              <span class="detail-value">{{ item.DoctorLevel }}</span>
            </div>
          </div>
          <div class="insurance-info">
            <span class="insurance-tag">医保</span>
          </div>
        </div>
        <div class="item-tag">
          <span :class="['tag', getTagClass(item.Tag)]">{{ item.Tag }}</span>
        </div>
      </div>
      
      <!-- 空数据状态 -->
      <div v-else-if="!loading" class="empty-state">
        <div class="empty-content">
          <div class="empty-icon">📋</div>
          <div class="empty-text">暂无价目数据</div>
          <div class="empty-subtext">请尝试搜索其他关键词或选择不同分类</div>
        </div>
      </div>
    </div>

    <!-- 加载更多 -->
    <div v-if="hasMore && filteredPriceItems.length > 0" class="load-more" @click="loadMore">
      <span>上拉加载更多</span>
    </div>
    
    <!-- 空状态下的加载更多提示 -->
    <div v-if="hasMore && filteredPriceItems.length === 0" class="load-more-empty" @click="loadMore">
      <span>上拉加载更多</span>
    </div>

    <!-- 优惠活动入口 -->
    <div class="discount-entry" @click="goToDiscounts">
      <div class="discount-content">
        <div class="discount-icon">🎉</div>
        <div class="discount-text">
          <div class="discount-title">优惠活动</div>
          <div class="discount-subtitle">查看所有优惠政策</div>
        </div>
        <div class="discount-arrow">→</div>
      </div>
    </div>

    <!-- 底部导航栏 -->
    <div class="bottom-nav">
      <div class="nav-item" @click="goToHome">
        <div class="nav-icon">🏠</div>
        <div class="nav-text">诊疗首页</div>
      </div>
      <div class="nav-item" @click="showFeatureNotReady">
        <div class="nav-icon">☁️</div>
        <div class="nav-text">微官网</div>
      </div>
      <div class="nav-item" @click="showFeatureNotReady">
        <div class="nav-icon">💬</div>
        <div class="nav-text">消息中心</div>
      </div>
      <div class="nav-item" @click="goToProfile">
        <div class="nav-icon">👤</div>
        <div class="nav-text">我的</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { showToast } from 'vant'
import OutpatientApi from '@/utils/Interceptors'

const router = useRouter()

// 定义价格项目类型
interface PriceItem {
  PriceId: number
  ServiceName: string
  ServiceType: string
  DepartmentId: number
  DepartmentName: string
  DoctorLevel: string
  Price: number
  Currency: string
  ValidFrom: string
  Title: string
  Tag: string
  Sample?: string
}

// 响应式数据
const searchKeyword = ref('')
const selectedCategory = ref('')
const hasMore = ref(true)
const priceItems = ref<PriceItem[]>([])
const loading = ref(false)

// 获取价目信息
const fetchPriceItems = async () => {
  try {
    loading.value = true
    const params = {
      Title: searchKeyword.value || undefined,
      Tag: selectedCategory.value || undefined
    }
    
    console.log('API请求参数:', params)
    
    const response = await OutpatientApi.get('/api/ConsultationCategory/SearchPriceItems', { params })
    
    console.log('API响应数据:', response.data)
    
    if (response.data.code === 200) {
      priceItems.value = response.data.data || []
      console.log('设置价格项目数据:', priceItems.value)
      // 只有在有数据时才显示成功消息
      if (response.data.data && response.data.data.length > 0) {
        showToast({
          message: response.data.msg,
          position: 'middle',
          duration: 2000
        })
      }
    } else {
      priceItems.value = []
      showToast({
        message: response.data.msg || '获取价目信息失败',
        position: 'middle',
        duration: 2000
      })
    }
  } catch (error) {
    console.error('获取价目信息失败:', error)
    priceItems.value = []
    showToast({
      message: '网络错误，请稍后重试',
      position: 'middle',
      duration: 2000
    })
  } finally {
    loading.value = false
  }
}

// 计算属性：过滤后的价格项目
const filteredPriceItems = computed(() => {
  return priceItems.value
})

// 获取标签样式类
const getTagClass = (tag: string) => {
  const tagMap: { [key: string]: string } = {
    '药品': 'tag-drug',
    '诊疗': 'tag-treatment',
    '检查': 'tag-examination',
    '检验': 'tag-laboratory',
    '手术': 'tag-surgery'
  }
  return tagMap[tag] || 'tag-default'
}

// 方法
const goBack = () => {
  router.back()
}

const handleSearch = () => {
  fetchPriceItems()
}

const handleCategoryChange = () => {
  fetchPriceItems()
}

const showItemDetail = (item: PriceItem) => {
  showToast({
    message: `${item.Title || item.ServiceName} - ¥${item.Price}`,
    position: 'middle',
    duration: 2000
  })
}

const loadMore = () => {
  showToast({
    message: '暂无更多数据',
    position: 'middle',
    duration: 1500
  })
}

const showFeatureNotReady = () => {
  showToast({
    message: '功能开发中，敬请期待！',
    position: 'middle',
    duration: 2000
  })
}

const goToHome = () => {
  router.push('/')
}

const goToProfile = () => {
  router.push('/profile')
}

const goToDiscounts = () => {
  router.push('/discounts')
}

onMounted(() => {
  // 页面加载时获取价目信息
  fetchPriceItems()
})
</script>

<style scoped>
.price-detail-container {
  min-height: 100vh;
  background: #f8f9fa;
  position: relative;
  padding-bottom: 80px;
}

/* 状态栏 */
.status-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  background: white;
  font-size: 14px;
  color: #333;
}

.status-icons {
  display: flex;
  gap: 5px;
}

/* 头部 */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  background: white;
  border-bottom: 1px solid #eee;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 15px;
}

.back-button {
  font-size: 20px;
  color: #333;
  cursor: pointer;
  padding: 5px;
}

.page-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin: 0;
}

.header-right {
  display: flex;
  gap: 15px;
}

.menu-icon {
  font-size: 18px;
  color: #666;
  cursor: pointer;
  padding: 5px;
}

.target-icon {
  font-size: 18px;
  color: #666;
  cursor: pointer;
  padding: 5px;
}

/* 搜索栏 */
.search-section {
  display: flex;
  background: white;
  padding: 15px 20px;
  border-bottom: 1px solid #eee;
  gap: 10px;
}

.search-input-container {
  flex: 1;
}

.search-input {
  width: 100%;
  padding: 12px 15px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 14px;
  outline: none;
}

.search-input:focus {
  border-color: #007bff;
}

.filter-dropdown {
  position: relative;
  min-width: 80px;
}

.category-select {
  width: 100%;
  padding: 12px 30px 12px 15px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 14px;
  outline: none;
  appearance: none;
  background: white;
}

.dropdown-arrow {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #666;
  font-size: 12px;
  pointer-events: none;
}

/* 价格列表 */
.price-list {
  padding: 20px;
}

.price-item {
  display: flex;
  align-items: flex-start;
  background: white;
  padding: 20px;
  margin-bottom: 15px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: transform 0.2s;
}

.price-item:hover {
  transform: translateY(-2px);
}

.item-info {
  flex: 1;
  margin-right: 15px;
}

.item-name {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  margin-bottom: 10px;
}

.item-details {
  margin-bottom: 10px;
}

.detail-row {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
  font-size: 14px;
}

.detail-label {
  color: #666;
  margin-right: 8px;
  min-width: 60px;
}

.detail-value {
  color: #333;
}

.detail-value.price {
  color: #ff6b6b;
  font-weight: bold;
}

.insurance-info {
  margin-top: 8px;
}

.insurance-tag {
  background: #4ecdc4;
  color: white;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 12px;
}

.item-tag {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.tag {
  padding: 4px 8px;
  border-radius: 10px;
  font-size: 12px;
  color: white;
  margin-bottom: 5px;
}

.tag-drug {
  background: #87ceeb;
}

.tag-treatment {
  background: #98fb98;
}

.tag-examination {
  background: #ffd700;
}

.tag-laboratory {
  background: #ff69b4;
}

.tag-surgery {
  background: #dda0dd;
}

.tag-default {
  background: #c0c0c0;
}

/* 加载状态 */
.loading-state {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px;
  padding: 40px 20px;
}

.loading-content {
  text-align: center;
}

.loading-icon {
  font-size: 48px;
  margin-bottom: 16px;
  animation: spin 1s linear infinite;
}

.loading-text {
  font-size: 16px;
  color: #666;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* 空数据状态 */
.empty-state {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px;
  padding: 40px 20px;
}

.empty-content {
  text-align: center;
}

.empty-icon {
  font-size: 48px;
  margin-bottom: 16px;
  opacity: 0.5;
}

.empty-text {
  font-size: 16px;
  color: #666;
  margin-bottom: 8px;
}

.empty-subtext {
  font-size: 14px;
  color: #999;
}

/* 优惠活动入口 */
.discount-entry {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  margin: 20px;
  border-radius: 12px;
  cursor: pointer;
  transition: transform 0.2s;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.discount-entry:hover {
  transform: translateY(-2px);
}

.discount-content {
  display: flex;
  align-items: center;
  padding: 20px;
  color: white;
}

.discount-icon {
  font-size: 24px;
  margin-right: 15px;
}

.discount-text {
  flex: 1;
}

.discount-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 4px;
}

.discount-subtitle {
  font-size: 14px;
  opacity: 0.9;
}

.discount-arrow {
  font-size: 18px;
  opacity: 0.8;
}

/* 加载更多 */
.load-more {
  text-align: center;
  padding: 20px;
  color: #666;
  cursor: pointer;
}

.load-more-empty {
  text-align: center;
  padding: 20px;
  color: #999;
  cursor: pointer;
  position: absolute;
  bottom: 100px;
  left: 0;
  right: 0;
}

/* 底部导航栏 */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  background: white;
  border-top: 1px solid #eee;
  padding: 10px 0;
}

.nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  padding: 5px;
}

.nav-icon {
  font-size: 20px;
  margin-bottom: 5px;
}

.nav-text {
  font-size: 12px;
  color: #666;
}

.nav-item.active .nav-text {
  color: #007bff;
}

/* 响应式设计 */
@media (max-width: 480px) {
  .price-item {
    padding: 15px;
  }
  
  .item-name {
    font-size: 15px;
  }
  
  .detail-row {
    font-size: 13px;
  }
}
</style> 